<template>
  <div class="command-center">
    <Map ref="mapRef" mapId="commandCenterMap" :mapInitOptions="{ zoom: 14 }" withDarw />
  </div>
</template>

<script setup>
import Map from '@/components/Map/index.vue';
import { onMounted, useTemplateRef } from 'vue';

onMounted(async () => {
  const mapReadyData = await mapRef.value.onMapReady();
  localMapEditor = mapReadyData.mapEditor;
  onInitMarkers();
})

let localMapEditor = null;
const mapRef = useTemplateRef('mapRef')

const onInitMarkers = () => {
  //向编辑池增加数据
  var center = mapRef.value.map.getCenter();
  const ids = localMapEditor.setFeatures({
    type: 'FeatureCollection',
    features: [{
      type: 'Feature',
      properties: {},
      geometry: { type: 'Point', coordinates: [center.lng + 0.003, center.lat + 0.002] }
    }, {
      type: 'Feature',
      properties: {},
      geometry: {
        type: 'LineString',
        coordinates: [[center.lng - 0.005, center.lat + 0.005], [center.lng - 0.005, center.lat - 0.005]]
      }
    }, {
      type: 'Feature',
      properties: {},
      geometry: {
        type: 'Polygon',
        coordinates: [[[center.lng, center.lat], [center.lng, center.lat + 0.003], [center.lng - 0.003, center.lat + 0.003], [center.lng - 0.003, center.lat], [center.lng, center.lat]]]
      }
    }]
  });
}
</script>

<style lang="scss" scoped>
.command-center {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  // border: 2px solid red;
}
</style>